<template>
  <div class="echartsPage">
    <div id="main"></div>
  </div>
</template>

<script setup>
const option = {
  grid: {
    left: 30,
    right: 60,
    bottom: 50,
    top: 80,
    containLabel: true,
  },
  // 提示框组件
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  title: {
    text: '大标题',
    top: 20,
    left: 'center',
  },
  legend: {
    data: ['数据1', '数据2'],
    bottom: 10,
  },
  xAxis: {
    type: 'category',
    name: '月份',
    boundaryGap: false,
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  },
  yAxis: {
    type: 'value',
    name: '单位：个',
  },
  series: [
    {
      name: '数据1',
      data: [150, 150, 224, 218, 135, 147, 160, 230, 110, 220, 230, 280],
      type: 'line',
    },
    {
      name: '数据2',
      data: [100, 150, 200, 140, 120, 250, 210, 140, 120, 250, 140, 120],
      type: 'line',
    },
  ],
}

nextTick(() => {
  const chartDom = document.getElementById('main')
  const myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
})
</script>

<style scoped>
.echartsPage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
#main {
  margin: 0 auto;
  border: 1px solid #c7c7c7;
  width: 800px;
  height: 50%;
  background-color: #fff;
}
</style>
